<template>
   <div v-if="DrawerData">
       <!-- 内容 -->
       <div class="content flex">
           <div class="box"> <img :src="DrawerData.headphoto" class="headphoto"></div>
            <div class="box">备注:{{DrawerData.remark || '无'}}</div>
            <button class="box" @click="toPersonal(DrawerData.touid)">用户名: {{DrawerData.username}}</button>
            <div class="box">性别: {{DrawerData.sex || '未定义'}}</div>
            <div class="box">居住地:{{DrawerData.address || '未定义'}}</div>
            <div class="box fun">
                <button class="danger" @click.stop="beforeDelete">删除</button>
                <button class="primary" @click="SendMessage">发消息</button>
            </div>

       </div>
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     props:['showdown'],
     computed:{
        ...mapState('Chat',['DrawerData']),
        ...mapState('Login',['User']),
     },
     methods:{
        ...mapActions('Chat',['DeleteFriend']),
        ...mapMutations('Chat',['SETCONTENT','SETCHATNOW']),
            //前往个人主页
       toPersonal(uid){  
          this.$public.ToPersonal(uid)
        },

        beforeDelete(){
             this.$confirm('此操作将永久删除该好友, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
               }).then(() => {
                     this.DeleteFriend_()
               },()=>{})
        },
        async  DeleteFriend_(){


           let {uid,touid} = this.DrawerData
           let res = await this.DeleteFriend({uid,touid})
           if(res.code == 200) {
                this.showdown()
                return this.$message.success(res.message)
           }
           this.$message.error(res.message)
        },
        SendMessage(){
             let {id,uid,touid,username,headphoto,remark} =this.DrawerData
             let content = null //最近的聊天内容
             let lasttime= null //最近的聊天时间
             let deleted=0 //是否删除
             let unread=0 //未读的数量
             let beforetime=null//上一次显示聊天时间的时间
             console.log(this.DrawerData)
             this.SETCHATNOW({id,uid,touid,username,headphoto,remark,content,lasttime,deleted,unread,beforetime})
             this.SETCONTENT([1,username])
        }
     }
  }
</script>
<style scoped lang='less'>
.content{
    width: 100%;

    img{
        width: 100px;height: 100px;
        border-radius: 5px;
        border: none;
    }
}
.box{
    width: 100%;
    text-align: center;
    margin: 5px 0;
    font-size: 18px;
    color: white;
}
.fun{
    button{
        padding: 5px 0;
        border-radius: 5px;
        font-weight: 600;
        font-size: 16px;
        margin:0 10px;
        width: 80px;
    }
    .danger{
        background: red;
        color: white;
    }
    .primary{
         background: #2080F0;
        color: white;
    }
}
</style>